<template>
	<view class="main">
		<searchinput placeholder='请输入搜索关键词' :hasscanbtn="true" :hassearchbtn="false" @serach="serach" @inputchange='inputchange'></searchinput>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item>
							<view class="swiper-item uni-bg-red">A</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">C</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<stzhangtab></stzhangtab>
		
		<MkGoodsList  @clickItem="goodsItem"  :test="title" :goods="goods"></MkGoodsList>
	</view>
</template>

<script>
	import searchinput from '../../components/searchinput/searchinput.vue'
	import stzhangtab from '../../components/stzhang-tab/stzhang-tab.vue'
	import MkGoodsList from '../../components/mk-goods-list/mk-goods-list.vue'
	
	export default {
		components: {
			searchinput,
			stzhangtab,
			MkGoodsList
		},
		data() {
			
			return {
				goods:[
					
					
						{
							img:'../../static/course/couse1.png',
							title:'深入理解C#',
							amount:'12',
							amountRemark:'没有过多理解',
							label:'测试',
							littleTitle:'C#你不知道得事情'
						},
						{
							img:'../../static/course/couse2.png',
							title:'深入理解C#',
							amount:'12',
							amountRemark:'没有过多理解',
							label:'测试',
							littleTitle:'C#你不知道得事情'
						},
						{
							img:'../../static/course/couse3.png',
							title:'深入理解C#',
							amount:'12',
							amountRemark:'没有过多理解',
							label:'测试',
							littleTitle:'C#你不知道得事情'
						},
						{
							img:'../../static/course/couse4.png',
							title:'深入理解C#',
							amount:'12',
							amountRemark:'没有过多理解',
							label:'测试',
							littleTitle:'C#你不知道得事情'
						}
						]
				,
				title: 'Hello',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {

		},
		methods: {
			//搜索框
			serach(inputval) {
				console.log('搜索')
			},
			inputchange(inputval) {
				console.log(inputval)
			},
			//轮播图
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			goodsItem(){
				
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	/* 轮播图 */
	.page-section{
		width: 96%;
		margin: 0 auto;
		}
		.page-section .swiper{
			background-color: #007AFF;
		}
</style>
